<!-- 通知提醒 -->
<template>
  <div class="main-content-container">
    <el-row>
      <el-col :span="2" :offset="22"><el-button @click="closeHandle">关闭</el-button></el-col>
    </el-row>
    <el-row class="mt10" type="flex">
      <Search :data="selections" :attribute="'warnTime'" class="searchStyle" @dateChange="handleDateChange" @change="handleTypeChange" />
      <dictionary-selector code="swan_workbench_txlx" :value.sync="searchForm.warnType" class="searchStyle" @change="handleSourceChange" />
      <!-- <dictionary-selector code="swan_cutomer_yyly" :value.sync="searchForm.appointmentSource" @change="handleSourceChange" /> -->
    </el-row>
    <!-- 表单区域 -->
    <el-table v-loading="loading" :data="chargeList">
      <el-table-column label="提醒时间" prop="warnTime" align="center" />
      <el-table-column label="提醒类型" prop="warnType" align="center" />
      <el-table-column label="预约内容" prop="warnContent" min-width="120" align="center" />
      <!-- <el-table-column label="等级" prop="level" align="center" /> -->
      <el-table-column label="操作" min-width="120" align="center">
        <template slot-scope="scope">
          <el-button type="text" @click="lookBtn(scope.row)">查看</el-button>
          <el-button v-if="scope.row.warnType === '预约'" type="text" @click="signInBtn(scope.row)">签到</el-button>
          <el-button v-if="scope.row.warnType === '预约'" type="text" @click="cancelBtn(scope.row)">取消预约</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination :page-num="params.page" :page-size="params.pageSize" :on-change="handlePaginationChange" :total="total" />
  </div>
</template>
<script>
import { DictionarySelector } from "@rabbit.do/rabbit";
// import { TypeSelection } from "@monkey.do/monkey";
import Search from "@/components/Search";
export default {
  components: {
    // TypeSelection,
    DictionarySelector,
    Search,
  },
  data() {
    return {
      selections: [
        {
          name: "今天",
          id: "today",
        },
        {
          name: "昨天",
          id: "yesterday",
        },
        {
          name: "近七天",
          id: "week",
        },
        {
          name: "自定义",
          id: "custom",
        },
      ],
      searchForm: {},
      receiverOptions: [],
      optionsProps: {
        children: "children",
        label: "name",
        value: "name",
        checkStrictly: true, // 选择任意一项
      },
      params: {
        page: 1,
        pageSize: this.$store.state.commonsettings.maxPageSize,
      },
      total: 0,
      chargeList: [],
      loading: false,
    };
  },
  created() {
    this.getChargeList();
  },
  methods: {
    async getChargeList() {
      if (!this.searchForm.appointmentDate) {
        const date = new Date();
        const year = date.getFullYear();
        const month = date.getMonth() + 1;
        const day = date.getDate();
        const beginTime = year + "-" + month + "-" + day + " 00:00:00";
        const endTime = year + "-" + month + "-" + day + " 23:59:59";
        this.searchForm.timeType = "today";
        this.searchForm.appointmentDate = beginTime + "_" + endTime;
      }
      this.loading = true;
      const res = await this.$api["workbench/notifier/messageList"]({ ...this.params, query: this.searchForm });
      this.loading = false;
      if (res.code !== 200) return this.$message.error("获取通知提醒列表失败！");
      this.chargeList = res.data.result;
      this.total = res.data.total;
    },
    handlePaginationChange(val) {
      this.params = { page: val.pageNum, pageSize: val.pageSize };
      this.getChargeList();
    },
    lookBtn() {

    },
    signInBtn() {

    },
    cancelBtn() {

    },
    // 顶部时间筛选
    handleDateChange(val) {
      this.searchForm.warnTime = val.createdTime;
      Object.assign(this.searchForm, val);
      this.getChargeList();
    },
    handleTypeChange(val) {
      this.searchForm.warnTime = val.createdTime;
      Object.assign(this.searchForm, val);
      this.getChargeList();
    },
    handleSourceChange() {
      this.getChargeList();
    },
    closeHandle() {
      this.$emit("closeHandle");
    },
  },
};
</script>
<style lang="scss" scoped>
.mt10{
  .searchStyle{
    margin: 0 15px 15px 0;
  }
}
</style>

